<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
//如果你想看到连续的线，你可以移除调用的moveTo()。
//                新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
                ctx.beginPath();
//                逆时针
//                脸
                ctx.arc(75,75,50,0,Math.PI*2,true);// 圆心x 圆心y 半径 起始弧度 终止弧度  逆时针true还是顺时针false
                ctx.moveTo(110,75);
//                顺时针
//                口
                ctx.arc(75,75,35,0,Math.PI,false);
                ctx.moveTo(65,65);
//                左眼
                ctx.arc(60,65,5,0,Math.PI*2,true);
                ctx.moveTo(95,65);
//                右眼
                ctx.arc(90,65,5,0,Math.PI*2,true);
                ctx.stroke();
            }
        }
    </script>
</head>
<body onload="draw()">
<canvas id="canvas" width="150px" height="150px"></canvas>
</body>
</html>